<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<!-- 引入vue资源，可以直接引入cdn上的地址或引入本地中 -->
		<!-- <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script> -->
		<script src="js/vue.js"></script>
	</head>
	<body>
		{{ message }}
		<!-- 在页面上提供一个双节点元素 -->
		<div id="app" class="dv1">
			<!-- {{}}插值表达式，作用：数据和页面结构关联起来 -->
		 {{ message }}
		 {{ message }}
		  {{ message }}
		  {{ message }}
		  {{age}}
		  {{arr[1]}}
		  学生姓名：{{student.name}}
		  学生年龄：{{student["age"]}}
		</div>
		{{ message }}
	</body>
	<script>
	// 创建vue实例，并与元素进行绑定
		var app = new Vue({
			// 元素挂载，可以通过选择器实现元素的绑定
		  el: '#app',
		  // vue实例中用的数据
		  data: {
			message: 'HelloWorld!',
			age:18,
			arr:["java","mysql","python"],
			student:{
				name:"tom",
				age:18
			}
		  }
		})
	</script>
</html>
